<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CopyTest</title>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
</head>
<body>
<input id="foo3" value="https://github.com/zenorocha/clipboard.js.git"/>
<div id="foo" style="margin-top: 10px">
    <div>copyTestContent===========</div>
<!--    <img id="foo2" value="12312"-->
<!--         src="https://bucket-zyj001.oss-cn-wulanchabu.aliyuncs.com/workplace/1676513833776142.png">-->
    <img value="12312" style="width: 100px;height: 100px" src="1676513833776142.png">
</div>
<!-- Trigger -->
<button class="btn1" onclick="copyElementToClipboard()">
    复制
</button>
<button class="btn" data-clipboard-target="#foo">
    <img src="https://clipboardjs.com/assets/images/clippy.svg" width="13" alt="Copy to clipboard"/>
</button>
</body>
</html>
<script>
window.onload = function () {

  var clipboard = new ClipboardJS('.btn', {
    container: document.getElementById('foo'),
  });
  clipboard.on('success', function (e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
  });

  clipboard.on('error', function (e) {
    console.error(e)
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
  });


}

function copyElementToClipboard() {
  debugger
  window.getSelection().removeAllRanges();
  let range = document.createRange();
  range.selectNode(document.getElementById("foo"));
  window.getSelection().addRange(range);
  document.execCommand('copy');
  window.getSelection().removeAllRanges();
}
</script>
